﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<SetListManager.Models.SetList>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Index.aspx
</asp:Content>

<asp:Content ID="Head1" ContentPlaceHolderID="HeadContent" runat="server">
    <%--jquery --%>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>   
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>   

    <%--jquery ui: gives us drag/drop sort functionaltiy--%>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>   

    <%--jqueryui stylesheet --%>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />

    <script src="/Scripts/jquery.dataTables.js" type="text/javascript"></script>
    <link href="/Content/DataTables/css/demo_table.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
    .dataTable_headwrapper 
    {
        clear: both;
        margin-bottom: 40px;
    }
    
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <script type="text/javascript">
        $(document).ready(function () {
            $('#dtUpcoming').dataTable({
                "sAjaxSource": "/SetList/RetrieveSetLists",
                "bStateSave": true,
                "bLengthChange": false,
                "bFilter": false,
                "aaSorting": [[1,'desc']],
                "bProcessing": true,
                "aoColumns": [
                    { "mDataProp": "Name",
                      "bSearchable": true
                      },
                    { "mDataProp": "GigDateTimeFormatted",
                        "sWidth": "125px"
                    },
                    { "mDataProp": "SetDuration",
                        "sWidth": "80px",
                        "bSortable": false
                       },
                    { "mDataProp": "SetListID",
                        "sTitle": "",
                        "sWidth": "245px",
                        "bSortable": false,
                        "bUseRendered": true,
                        "fnRender": function (obj) {
                            return 'Details | <a href="/Setlist/Edit/' + obj.aData["SetListID"] + '">Edit</a> | ' +
                                   '<a href="/Setlist/Delete/' + obj.aData["SetListID"] + '">Delete</a> | ' +
                                   '<a href="/Setlist/Print/' + obj.aData["SetListID"] + '">Print</a> | ' +
                                   '<a href="/Setlist/CopyTo/' + obj.aData["SetListID"] + '">Copy To...</a>';
                        }
                    }
                    ]
            });
        });
    </script>

    <div id="editbuttons_rt">
    <%: Html.ActionLink("Create New", "Create", null, new { @class = "link-button" })%>
    </div> <!-- /editbuttons_rt -->

    <h1>Set Lists</h1>
    <div class="dataTable_headwrapper">
    <h2>Upcoming</h2>
    <table id="dtUpcoming" class="display">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Gig Date/Time
                </th>
                <th>
                   Set Duration
                </th>
                <th>
                    Operations
                </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    </div> <!-- /dataTable_headwrapper -->
    <p>NOTE: Set list duration assumes a 60 second pause between songs.</p>
</asp:Content>

